<template>
  <div class="progress">
    <div class="curTime">{{ curTime }}</div>
    <div class="drag">
      <div
        ref="circle"
        class="circle"
        style="transform: translateX(0)"
        @touchstart="circleTouchStart"
        @touchmove="circleTouchMove"
        @touchend="circleTouchEnd"
      ></div>
      <div ref="frontBg" class="frontBg"></div>
      <div class="backBg"></div>
    </div>
    <div class="totalTime">{{ durTimeFmt }}</div>
  </div>
</template>

<script>
export default {
  props: {
    searchList: {
      default() {
        return [];
      },
    },
    indexObj: {
      default() {
        return {
          index: 0,
          len: 1,
        };
      },
    },
    musicInfoList: {
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      durTime: 0, //存储总时长
      durTimeFmt: "00:00",
      frameId: null, //定时器
      startTime: 0, //开始播放的时间
      curTime: "00:00", // 当前播放时间
      lastPercent: 0, //暂停时已经走的百分比
      startPointX: 0, //圆点拖拽时按下的坐标的位置
      disPointX: 0,
      startLeft: 0, //圆点按下时已经走的距离
      percent: 0, //圆点拖拽的百分比
    };
  },
  mounted() {
    // 将圆点置为初始位置
    this.$refs.circle.style.transform = "translateX(0)";
  },
  methods: {
    renderAllTime(time) {
      this.durTime = Math.floor(time / 1000); //秒数
      this.durTimeFmt = this.formatTime(this.durTime);
    },
    formatTime(time) {
      time = Math.round(time);

      //266
      var m = Math.floor(time / 60); //分钟
      var s = time % 60; //秒钟

      m = m < 10 ? "0" + m : m;
      s = s < 10 ? "0" + s : s;

      return m + ":" + s;
    },
    move(per) {
      //移动进度条
      cancelAnimationFrame(this.frameId);
      var This = this;

      this.lastPercent = per === undefined ? this.lastPercent : per;

      this.startTime = new Date().getTime(); //按下时记录一个时间点

      function frame() {
        var curTime = new Date().getTime();
        var per =
          This.lastPercent + (curTime - This.startTime) / (This.durTime * 1000); //走的百分比

        if (per <= 1) {
          //这个条件成立说明当前歌曲还没有播放完
          This.update(per);
        } else {
          //走到这里说明歌曲已经播放了100%了，停止播放（关掉定时器）
          cancelAnimationFrame(This.frameId);
        }

        This.frameId = requestAnimationFrame(frame);
      }
      frame();
    },
    update(per) {
      //更新进度条（时间，走的百分比）
      //更新左侧的时间
      var time = this.formatTime(per * this.durTime);
      this.curTime = time;

      //更新前背景的位置
      this.$refs.frontBg.style.width = per * 100 + "%";

      //更新圆点的位置
      var l = per * this.$refs.circle.parentNode.offsetWidth;
      this.$refs.circle.style.transform = "translateX(" + l + "px)";
    },
    stop() {
      //停止进度条
      cancelAnimationFrame(this.frameId);

      var stopTime = new Date().getTime();

      this.lastPercent += (stopTime - this.startTime) / (this.durTime * 1000); //如果不用+=的话会漏掉一次已播放的时长百分比
    },

    circleTouchStart(ev) {
      //拖拽开始
      //changedTouches    触发当前事件的手指列表
      this.startPointX = ev.changedTouches[0].pageX;
      this.startLeft = parseFloat(
        this.$refs.circle.style.transform.split("(")[1]
      ); //按下时元素离左边的距离
      this.stop(); // 让进度条停止
    },
    circleTouchMove(ev) {
      this.disPointX = ev.changedTouches[0].pageX - this.startPointX; //拖动的距离
      var l = this.startLeft + this.disPointX; //小圆点要走的距离

      if (l < 0) {
        l = 0;
      } else if (l > this.$refs.circle.offsetParent.offsetWidth) {
        l = this.$refs.circle.offsetParent.offsetWidth;
      }
      this.$refs.circle.style.transform = "translateX(" + l + "px)";

      //计算一下走的百分比
      this.percent = l / this.$refs.circle.offsetParent.offsetWidth;
      this.update(this.percent); // 让进度条更新

      ev.preventDefault();
    },
    circleTouchEnd() {
      //拖拽结束
      let cutTime = this.percent * Math.floor(this.musicInfoList[this.indexObj.index].duration / 1000); // 当前拖拽到的时间点,将单位转为秒
      this.$player.music.playTo(cutTime);
      this.$player.music.play();
      this.move(this.percent); //进度条也要走
      this.$emit("setImgPlay", true); // 让图片旋转，让播放按钮处于播放状态
    },
  },
};
</script>

<style lang="less" scoped>
.his-item {
  padding: 15px;
  background: #eee;
  border-radius: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  display: inline-block;
}
</style>
